<template>
  <div class="product-detail">
    <div class="detail-container">
      <img :src="product.image" alt="产品图片" class="product-image" />
      <div class="product-info">
        <div class="product-category">电子产品</div>
        <h1 class="product-name">{{ product.name }}</h1>
        <div class="product-rating">
          <span class="star" v-for="i in 5" :key="i" :class="{ filled: i <= 4.8 }">★</span>
          (4.8) 256条评价
        </div>
        <div class="product-price">
          ¥{{ product.price }}
          <span class="original-price">¥{{ product.price + 300 }}</span>
          <span class="discount">省¥300</span>
        </div>
        <div class="product-features">
          <div class="feature-item">✔ 5G网络支持</div>
          <div class="feature-item">✔ 无线充电</div>
          <div class="feature-item">✔ IP68防水</div>
          <div class="feature-item">✔ 人脸识别</div>
          <div class="feature-item">✔ 指纹解锁</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const product = ref({})

// 模拟根据id获取产品详情的方法
const getProductDetail = (id) => {
  // 实际项目中可调用接口，这里模拟数据
  const mockProducts = [
    { id: 1, name: '智能手机', price: 2999, image: 'https://picsum.photos/300/400?random=10' },
    { id: 2, name: '无线耳机', price: 599, image: 'https://picsum.photos/300/400?random=11' },
    { id: 3, name: '智能手表', price: 1299, image: 'https://picsum.photos/300/400?random=12' },
    { id: 4, name: '笔记本电脑', price: 5999, image: 'https://picsum.photos/300/400?random=13' }
  ]
  product.value = mockProducts.find(item => item.id === parseInt(id))
}

onMounted(() => {
  getProductDetail(route.params.id)
})
</script>

<style scoped>
.product-detail {
  padding: 40px 20px;
}
.detail-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.product-image {
  width: 100%;
  border-radius: 8px;
}
.product-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-category {
  color: #6a4a9e;
  font-size: 14px;
  margin-bottom: 8px;
}
.product-name {
  font-size: 32px;
  margin-bottom: 16px;
}
.product-rating {
  color: #ffc107;
  margin-bottom: 24px;
}
.star.filled {
  color: #ffc107;
}
.product-price {
  font-size: 28px;
  font-weight: bold;
  color: #e64340;
  margin-bottom: 24px;
}
.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}
.discount {
  background: #e64340;
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
}
.product-features {
  background: #f9fafc;
  border-radius: 8px;
  padding: 16px;
}
.feature-item {
  margin-bottom: 8px;
}
</style>